<template>
  <v-scale-screen width="1920" height="1080" :fullScreen="true">
      <!-- 头部区域 -->
      <div class="dp_top">
          <!-- 返回、天气 -->
          <div class="dt_back_weather">
              <img class="dbw_fh" src="../../../assets/largescreen/new/top_back.png" alt="" @click="goBack">
              <div class="dbw_tianqi">
                  <img :src="qihouimg">
                  <div class="tianqi">{{tianqi}} {{wendu}}℃</div>
              </div>
          </div>
          <!-- 类型 -->
          <div class="dt_type dt_type_ykhx selected_left" @click="toTurn(1)"><div>游客画像</div></div>
          <div class="dt_type dt_type_jq" @click="toTurn(2)"><div>景区</div></div>
          <div class="dt_type dt_type_jdms" @click="toTurn(3)"><div>酒店民宿</div></div>
          <div class="dt_type dt_type_jt" @click="toTurn(4)"><div>交通</div></div>
          <!-- 当前时间 -->
          <div class="dt_time">{{ currentTime }}</div>
          <!-- 中间文字隐藏区域用于点击切换首页 -->
          <div class="dt_click" @click="toTurn(0)"></div>
      </div>
      <!-- 中间区域 -->
      <div class="dp_middle">
          <!-- 中间区域的左边部分 -->
          <div class="dm_left">
              <div class="box dp_box">
                  <div class="b_title">游客停留时长</div>
                  <div class="db_content">
                    <div class="dc_tabs">
                        <div :class="tlIdx==0?'active':''" @click="changeDataByTlsc(0)">工作日</div>
                        <div :class="tlIdx==1?'active':''" @click="changeDataByTlsc(1)">节假日</div>
                    </div>
                    <div class="dc_tlsc" v-if="tlIdx==0">
                        <div class="dct_box">
                            <div class="dct_left dct_lb">
                                <div class="dctl_box dctlb_l">
                                    <div class="db_text">{{ workday.moreDayNum }}<span>人</span></div>
                                    <div class="db_tip">
                                        <p>三天+</p>
                                        <img src="../../../assets/largescreen/new/m_l_yuan.png" alt="">
                                    </div>
                                </div>
                                <div class="dctl_box dctlb_l">
                                    <div class="db_text">{{ workday.oneDayNum }}<span>人</span></div>
                                    <div class="db_tip">
                                        <p>一天</p>
                                        <img src="../../../assets/largescreen/new/m_l_yuan.png" alt="">
                                    </div>
                                </div>
                            </div>
                            <div class="dct_middle">
                                <img src="../../../assets/largescreen/new/m_l_tlscbg.png">
                            </div>
                            <div class="dct_right dct_lb">
                                <div class="dctl_box dctlb_r">
                                    <div class="db_tip">
                                        <img src="../../../assets/largescreen/new/m_l_yuan.png" alt="">
                                        <p>三天</p>
                                    </div>
                                    <div class="db_text">{{ workday.threeDayNum }}<span>人</span></div>
                                </div>
                                <div class="dctl_box dctlb_r">
                                    <div class="db_tip">
                                        <img src="../../../assets/largescreen/new/m_l_yuan.png" alt="">
                                        <p>两天</p>
                                    </div>
                                    <div class="db_text">{{ workday.twoDayNum }}<span>人</span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="dc_tlsc" v-else>
                        <div class="dct_box">
                            <div class="dct_left dct_lb">
                                <div class="dctl_box dctlb_l">
                                    <div class="db_text">{{ holiday.moreDayNum }}<span>人</span></div>
                                    <div class="db_tip">
                                        <p>三天+</p>
                                        <img src="../../../assets/largescreen/new/m_l_yuan.png" alt="">
                                    </div>
                                </div>
                                <div class="dctl_box dctlb_l">
                                    <div class="db_text">{{ holiday.oneDayNum }}<span>人</span></div>
                                    <div class="db_tip">
                                        <p>一天</p>
                                        <img src="../../../assets/largescreen/new/m_l_yuan.png" alt="">
                                    </div>
                                </div>
                            </div>
                            <div class="dct_middle">
                                <img src="../../../assets/largescreen/new/m_l_tlscbg.png">
                            </div>
                            <div class="dct_right dct_lb">
                                <div class="dctl_box dctlb_r">
                                    <div class="db_tip">
                                        <img src="../../../assets/largescreen/new/m_l_yuan.png" alt="">
                                        <p>三天</p>
                                    </div>
                                    <div class="db_text">{{ holiday.threeDayNum }}<span>人</span></div>
                                </div>
                                <div class="dctl_box dctlb_r">
                                    <div class="db_tip">
                                        <img src="../../../assets/largescreen/new/m_l_yuan.png" alt="">
                                        <p>两天</p>
                                    </div>
                                    <div class="db_text">{{ holiday.twoDayNum }}<span>人</span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                  </div>
              </div>

              <div class="box dp_box">
                  <div class="b_title">游客年龄分析</div>
                  <div class="kltjfx_tabs">
                      <div class="pre" :class="aidx==0?'active':''" @click="changeTabBySex(0)">男</div>
                      <div class="pre" :class="aidx==1?'active':''" @click="changeTabBySex(1)">女</div>
                  </div>
                  <div class="db_content">
                      <div class="chart" ref="Visitorage"></div>
                  </div>
              </div>

              <div class="box dp_box">
                  <div class="b_title">客流统计分析</div>
                  <div class="kltjfx_tabs">
                      <div class="pre" :class="kidx==0?'active':''" @click="changeTabByKltjfx(0,3)">月</div>
                      <div class="pre" :class="kidx==1?'active':''" @click="changeTabByKltjfx(1,2)">季</div>
                      <div class="pre" :class="kidx==2?'active':''" @click="changeTabByKltjfx(2,1)">年</div>
                  </div>
                  <div class="db_content">
                      <div class="chart" ref="Passengerflow"></div>
                  </div>
              </div>
          </div>
          <!-- 中间区域的中间部分 -->
          <div class="dm_center">
              <div class="dmc_map"></div>

              <div class="box c_b_box">
                  <!-- 标题 -->
                  <div class="b_title">客流统计同比</div>
                  <div class="db_content">
                        <div class="chart" ref="Statisticalanalysis"></div>
                  </div>
              </div>
          </div>
          <!-- 中间区域的右边部分 -->
          <div class="dm_right">
              <div class="box dp_box">
                  <div class="b_title">节假日客流</div>
                  <div class="db_content">
                      <div class="chart" ref="jjrChart">

                      </div>
                  </div>
              </div>
              <div class="box dp_box">
                  <div class="b_title">省外客流（当月）</div>
                  <div class="db_content">
                      <div class="chart mjzyx_pm">
                          <vue-seamless-scroll ref="vueSeamlessRef" class="scroll-list-seamless" :data="copyDataSwkl" :class-option="defaultOption" >
                              <ul class="ul-scoll">
                                  <li v-for="(item,index) in swklRankList" :key="index" class="mpm_item">
                                      <div class="mpmi_top">
                                          <div class="mpmit_l">
                                              <div class="mpmil_top" :style="{'background-image':'url('+require('../../../assets/largescreen/top' + (index<3?index+1:4) + '.png')+')'}">TOP.{{ index+1 }}</div>
                                              <p>{{ item.name }}</p>
                                          </div>    
                                          <div class="mpmit_r">{{ item.num }}人</div>    
                                      </div>
                                      <div class="mpmi_bottom">
                                          <div class="mpmi_bottom_bl" :style="{'width':item.bl+'%'}"></div>
                                      </div>
                                  </li>
                              </ul>
                          </vue-seamless-scroll>
                      </div>
                  </div>
              </div>
              <div class="box dp_box">
                  <div class="b_title">省内客流（当月）</div>
                  <div class="db_content">
                      <div class="chart mjzyx_pm_sn">
                          <vue-seamless-scroll ref="vueSeamlessRefSn" class="scroll-list-seamless-sn" :data="copyDataSnkl" :class-option="defaultOption" >
                              <ul class="ul-scoll">
                                  <li v-for="(item,index) in snklRankList" :key="index" class="mpm_item">
                                      <div class="mpmi_top">
                                          <div class="mpmit_l">
                                              <div class="mpmil_top" :style="{'color':snTextClassCfg[index]||snDefaultClass}">NO.{{ index+1 }}</div>
                                              <p>{{ item.name }}</p>
                                          </div>    
                                          <div class="mpmit_r">{{ item.num }}人</div>    
                                      </div>
                                      <div class="mpmi_bottom">
                                          <div class="mpmi_bottom_bl" :style="{'width':item.bl+'%','background':'linear-gradient('+(snClassCfg[index]||snDefaultClass)+')'}"></div>
                                          <div class="mp_end" :style="{'left':item.bl+'%'}"></div>
                                      </div>
                                  </li>
                              </ul>
                          </vue-seamless-scroll>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      <!-- 中间动态背景地图 -->
      <div class="dp_map"></div>
      <!-- 乡镇地图标记点 -->
      <div class="map_town"
          :class="townIndex===index?'town_active':''"
          :style="town.style"
          v-for="(town,index) in townList"
          :key="index"
          @click="changeTown(town.id,index)"
      >{{ town.name }}</div>
      <!-- 底部区域 -->
      <div class="dp_bottom"></div>
  </v-scale-screen>
</template>
<script>
  var sjTimer,refreshTimer;
  import * as echarts from "echarts";
  import 'echarts-gl';
  import vueSeamlessScroll from 'vue-seamless-scroll'

  export default {
      components: {
          vueSeamlessScroll
      },
      data() {
          return {
              // 头部
              qihouimg: '',   
              tianqi: '',
              wendu: '',
              currentTime:'',
              routerCfg:{
                  0:'/cockpit-home',
                  1:'/cockpit-cockpitjd',
                  2:'/cockpit-cockpitjj',
                  3:'/cockpit-cockpityk',
                  4:'/cockpit-cockpitjt'
              },
              // 地图岛屿
              myislandId: [],
              townIndex:'',
              townList:[
                  {id:['4164678933'],name:'花鸟乡',style:{'left': '1058px','top': '290px'}},
                  {id:['1721484186251956225','1730426782508650497'],name:'洋山镇',style:{'left': '614px','top': '495px'}},
                  {id:['5554544444'],name:'菜园镇',style:{'left': '820px','top': '462px'}},
                  {id:['5554544444'],name:'五龙乡',style:{'left': '1017px','top': '477px'}},
                  {id:['1346784662'],name:'枸杞乡',style:{'left': '1180px','top': '501px'}},
                  {id:['4545454544'],name:'嵊山镇',style:{'left': '1307px','top': '485px'}},
                  {id:['5645645645'],name:'黄龙乡',style:{'left': '1054px','top': '612px'}}
              ],
              // 游客停留时长
              tlIdx:0,
              workday:{},
              holiday:{},
              // 游客年龄分析
              aidx:0,
              boyAgeDistList:[],
              girlAgeDistList:[],
              Touristageanalysis1:[],
              Touristageanalysis2:[],
              // 客流统计分析
              kidx:2,
              Overviewparkselect:1,
              shijian:[],
              renshu:[],
              renshuyear1:[],
              renshuyear2:[],
              renshujidu1:[],
              renshujidu2:[],
              renshuyue1:[],
              renshuyue2:[],
              // 客流统计同比
              province:'',
              jinnian1:'',
              jinnian2:'',
              analysislastyear:[],
              analysisThisyear:[],
              analysisyearonyearbasis:[],
              // 节假日客流
              jiejiari1:[],
              jiejiari2:[],
              // 省外客流（当月）
              copyDataSwkl:[],
              swklMonthData:[],
              swklRankList:[],
              // 省内客流（当月）
              copyDataSnkl:[],
              snklMonthData:[],
              snklRankList:[],
              snTextClassCfg:{
                0:'#FF4141',
                1:'#3AF0B8',
                2:'#FF9D00'
              },
              snTextDefaultCLass:'#2A9FFE',
              snClassCfg:{
                0:'90deg, rgba(246,120,162,0) 0%, #CF346B 100%',
                1:'90deg, rgba(90,255,224,0) 0%, #00FF95 100%',
                2:'270deg, #FF9D00 0%, rgba(255,157,0,0.4) 100%'
              },
              snDefaultClass:'270deg, #08F4F9 0%, rgba(1,155,243,0) 100%'
          }
      },
      created(){
          this.getWeather();
          this.getCurrentTime();
          sjTimer = setInterval(() => {
              this.getCurrentTime();
          }, 1000);
          this.init();
          refreshTimer = setInterval(() => {
              this.init();
          }, 15000);
      },
      computed: {
          defaultOption () {
              return {
                  step: 0.3, // 数值越大速度滚动越快
                  limitMoveNum: 1, // 开始无缝滚动的数据量
                  hoverStop: true, // 是否开启鼠标悬停stop
                  direction: 1, // 0向下 1向上 2向左 3向右
                  openWatch: true, // 开启数据实时监控刷新dom
                  singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                  singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                  waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
              }
          }
      },
      beforeDestroy(){
          clearInterval(sjTimer);
          clearInterval(refreshTimer);
      },
      methods:{
          getWeather(){
              let that=this;
              //加载天气查询插件
              AMap.plugin('AMap.Weather', function() {
                  //创建天气查询实例
                  let weather = new AMap.Weather();
                  //执行实时天气信息查询
                  weather.getLive('嵊泗县', function(err, data) {
                      if (data.info == 'OK') {
                          that.tianqi = data.weather;
                          that.wendu = data.temperature;
                          if (data.weather.indexOf("晴") != -1) {
                              that.qihouimg =
                                  'https://i.ringzle.com/file/20231220/8fff92353a984b2c923429c782e0f0ac.png';
                          } else if (data.weather.indexOf("暴雪") != -1) {
                              that.qihouimg =
                                  'https://i.ringzle.com/file/20231220/b4a84f8e5a7d41d49d69d6a6fcbcac9c.png';
                          } else if (data.weather.indexOf("暴雨") != -1) {
                              that.qihouimg =
                                  'https://i.ringzle.com/file/20231220/c3430daaf25c4315abcc046815f7dca2.png';
                          } else if (data.weather.indexOf("冰雹") != -1) {
                              that.qihouimg =
                                  'https://i.ringzle.com/file/20231220/1f7497a9725740e48e6ef06725680c9f.png';
                          } else if (data.weather.indexOf("大雪") != -1) {
                              that.qihouimg =
                                  'https://i.ringzle.com/file/20231220/8fbbaaf4564b4a5e9f10785bd83cb346.png';
                          } else if (data.weather.indexOf("大雨") != -1) {
                              that.qihouimg =
                                  'https://i.ringzle.com/file/20231220/b731ec5b2a974c1fbfdb2efcc18b9091.png';
                          } else if (data.weather.indexOf("多云") != -1) {
                              that.qihouimg =
                                  'https://i.ringzle.com/file/20231220/5c263447dab4446a980f086636b6cf34.png';
                          } else if (data.weather.indexOf("雷阵雨") != -1) {
                              that.qihouimg =
                                  'https://i.ringzle.com/file/20231220/7d65235177fa4156859fcbef8c057705.png';
                          } else if (data.weather.indexOf("雾") != -1) {
                              that.qihouimg =
                                  'https://i.ringzle.com/file/20231220/1d4ecb857a7e4ba9a00a8c210580955c.png';
                          } else if (data.weather.indexOf("小到中雨") != -1) {
                              that.qihouimg =
                                  'https://i.ringzle.com/file/20231220/0f3ba3c4eb1c4fd7950644473a5321e3.png';
                          } else if (data.weather.indexOf("小雪") != -1) {
                              that.qihouimg =
                                  'https://i.ringzle.com/file/20231220/3c9ccc8c449649c99c0f12b42bf5110d.png';
                          } else if (data.weather.indexOf("雨") != -1) {
                              that.qihouimg =
                                  'https://i.ringzle.com/file/20231220/4cbe88253ffb4f5899ef523c1c4d0b22.png';
                          } else if (data.weather.indexOf("阴") != -1) {
                              that.qihouimg =
                                  'https://i.ringzle.com/file/20231220/5e8e64175e034bdf8303da3acb174b19.png';
                          } else if (data.weather.indexOf("雨夹雪") != -1) {
                              that.qihouimg =
                                  'https://i.ringzle.com/file/20231220/10912cdd39114a9b96a794756a9cdb86.png';
                          } else if (data.weather.indexOf("阵雨@") != -1) {
                              that.qihouimg =
                                  'https://i.ringzle.com/file/20231220/607c0514d2364c2e8363c4886523fb0e.png';
                          } else if (data.weather.indexOf("中到大雨") != -1) {
                              that.qihouimg =
                                  'https://i.ringzle.com/file/20231220/2f2c4e797f884894a9bf3ab9b46663fe.png';
                          } else if (data.weather.indexOf("中雪") != -1) {
                              that.qihouimg =
                                  'https://i.ringzle.com/file/20231220/7166ea1b330845bcb146e87cfd532a9b.png';
                          } else if (data.weather.indexOf("中雨") != -1) {
                              that.qihouimg =
                                  'https://i.ringzle.com/file/20231220/a4e0a114e87a40dd8cffec07ba5ea83f.png';
                          }else if (data.weather.indexOf("霾") != -1) {
                              that.qihouimg =
                                  'https://i.ringzle.com/file/20231229/1f68b36db41748d3bf208cb86ce482cf.png';
                          }

                      }
                  });
              });
          },
          getCurrentTime(){
              this.currentTime = new Date().Format('yyyy-MM-dd hh:mm:ss')
          },
          init(){
            this.gettldata();
              this.getAllData();
          },
            gettldata(){
                this.$http.post("sys/visitorflow/selectVisitorStayData", {
                    islandId: this.myislandId,
                    province:this.province
                })
                .then((res) => {
                    if (res.data.code == 0){
                        this.workday=res.data.data.workday;
                        this.holiday =res.data.data.holiday;
                    } else {
                        this.$message.error(res.data.msg);
                    }
                });
            },
          // 获取各接口数据
          getAllData(){
            var currentYear = new Date().getFullYear();
            this.jinnian1=currentYear+'年';
            var lastYear = currentYear - 1;
            this.jinnian2=lastYear+'年';
            this.$http.post("sys/visitorflow/selectVisitorScreen", {
                islandId: this.myislandId,
                province:this.province
            })
            .then((res) => {
                if (res.data.code == 0) {
                    this.analysislastyear=res.data.data.lastAnnualArr;  //客流统计分析-去年
                    this.analysisThisyear=res.data.data.currAnnualArr;    //客流统计分析-今年
                    this.analysisyearonyearbasis=res.data.data.annualRatioArr;    //客流统计分析-同比
                    this.Statisticalanalysisdata();
                    
                    this.boyAgeDistList = res.data.data.boyAgeDistList;
                    this.girlAgeDistList = res.data.data.girlAgeDistList;
                    this.getVisitoragedata()

                    this.renshuyear1 = res.data.data.annualList.map(obj => obj.monthMod);// 游客人数-年
                    this.renshuyear2 = res.data.data.annualList.map(obj => obj.personNum);// 游客人数-年-人数
                    this.renshujidu1 = res.data.data.quarterList.map(obj => obj.monthMod);// 游客人数-年
                    this.renshujidu2 = res.data.data.quarterList.map(obj => obj.personNum);// 游客人数-年-人数
                    this.renshuyue1 = res.data.data.monthList.map(obj => obj.monthMod);// 游客人数-年
                    this.renshuyue2 = res.data.data.monthList.map(obj => obj.personNum);// 游客人数-年-人数
                    this.shijian= this.renshuyear1;
                    this.renshu=this.renshuyear2;
                    this.getPassengerflowdata();  //年度累计客流
                    
                    // 节假日客流
                    this.jiejiari1 = res.data.data.holidayList.map(obj => obj.monthMod);
                    this.jiejiari2 = res.data.data.holidayList.map(obj => obj.personNum);
                    this.Holidaysfestivals();
                    
                    this.swklMonthData = res.data.data.outProList;
                    this.getSwklDataByCurrentMonth(); // 省外客流（当月）

                    this.snklMonthData = res.data.data.inProList;
                    this.getSnklDataByCurrentMonth(); // 省外客流（当月）
                } else this.$message.error(res.data.msg);
            })
          },
          changeDataByTlsc(idx){
            this.tlIdx = idx;
          },
          // 游客年龄分析
          changeTabBySex(idx){
              this.aidx = idx;
              this.getVisitoragedata();
          },
          getVisitoragedata () {
            if(this.aidx==0){//男
              this.Touristageanalysis1 = this.boyAgeDistList.map(obj => obj.ageDistKey);// 游客年龄分析-年龄
              this.Touristageanalysis2 = this.boyAgeDistList.map(obj => obj.personNum);// 游客年龄分析-人数
            }else{//女
              this.Touristageanalysis1 = this.girlAgeDistList.map(obj => obj.ageDistKey);// 游客年龄分析-年龄
              this.Touristageanalysis2 = this.girlAgeDistList.map(obj => obj.personNum);// 游客年龄分析-人数
            }

            let myChart = echarts.init(this.$refs.Visitorage)

        //   let xaxisData = ['20以下', '20-30岁', '30-40岁', '40-50岁', '50岁以上']
          //  let yaxisData = [50, 100, 200, 150, 240]

            const offsetX = 10
            const offsetY = 5
    // 绘制左侧面
            const CubeLeft = echarts.graphic.extendShape({
              shape: {
                x: 0,
                y: 0,
              },
              buildPath: function (ctx, shape) {
                // 会canvas的应该都能看得懂，shape是从custom传入的
                const xAxisPoint = shape.xAxisPoint
                const c0 = [shape.x, shape.y]
                const c1 = [shape.x - offsetX, shape.y - offsetY]
                const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY]
                const c3 = [xAxisPoint[0], xAxisPoint[1]]
                ctx
                  .moveTo(c0[0], c0[1])
                  .lineTo(c1[0], c1[1])
                  .lineTo(c2[0], c2[1])
                  .lineTo(c3[0], c3[1])
                  .closePath()
              },
            })

    // 绘制右侧面
            const CubeRight = echarts.graphic.extendShape({
              shape: {
                x: 0,
                y: 0,
              },
              buildPath: function (ctx, shape) {
                const xAxisPoint = shape.xAxisPoint
                const c1 = [shape.x, shape.y]
                const c2 = [xAxisPoint[0], xAxisPoint[1]]
                const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY]
                const c4 = [shape.x + offsetX, shape.y - offsetY]
                ctx
                  .moveTo(c1[0], c1[1])
                  .lineTo(c2[0], c2[1])
                  .lineTo(c3[0], c3[1])
                  .lineTo(c4[0], c4[1])
                  .closePath()
              },
            })

    // 绘制顶面
            const CubeTop = echarts.graphic.extendShape({
              shape: {
                x: 0,
                y: 0,
              },
              buildPath: function (ctx, shape) {
                const c1 = [shape.x, shape.y]
                const c2 = [shape.x + offsetX, shape.y - offsetY] //右点
                const c3 = [shape.x, shape.y - offsetX]
                const c4 = [shape.x - offsetX, shape.y - offsetY]
                ctx
                  .moveTo(c1[0], c1[1])
                  .lineTo(c2[0], c2[1])
                  .lineTo(c3[0], c3[1])
                  .lineTo(c4[0], c4[1])
                  .closePath()
              },
            })

    // 注册三个面图形
            echarts.graphic.registerShape('CubeLeft', CubeLeft)
            echarts.graphic.registerShape('CubeRight', CubeRight)
            echarts.graphic.registerShape('CubeTop', CubeTop)

            let option = {
              //  backgroundColor: 'black',
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'shadow',
                },
                //  backgroundColor: "rgba(255,255,255,0.75)",
                extraCssText: 'box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);',
                textStyle: {
                  fontSize: 12,
                  color: '#fff',
                },
                formatter: (params, ticket, callback) => {
                  const item = params[1]
                  return item.name + ' : ' + item.value + '人'
                },
              },
              grid: {
                left: '7%',
                right: '0%',
                top: '16%',
                bottom: '1%',
                containLabel: true,
              },
              xAxis: {
                type: 'category',
                data: this.Touristageanalysis1,
                axisLine: {
                  show: true,
                  lineStyle: {
                    width: 1,
                    color: '#035192'
                  }
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  fontSize: 12,
                  color: '#C6D7F1'
                }
              },
              yAxis: {
                type: 'value',
                name: '单位：人',
                nameTextStyle: {
                  color: '#C6D7F1',
                  fontWeight: 400,
                  fontSize: 12
                },
                axisLine: {
                  show: false,
                  lineStyle: {
                    width: 1,
                    color: '#545454'
                  }
                },
                splitLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  fontSize: 12,
                  color: '#C6D7F1'
                }
              },
              series: [
                {
                  type: 'custom',
                  renderItem: (params, api) => {
                    const location = api.coord([api.value(0), api.value(1)])
                    return {
                      type: 'group',
                      children: [
                        {
                          type: 'CubeLeft',
                          shape: {
                            api,
                            xValue: api.value(0),
                            yValue: api.value(1),
                            x: location[0],
                            y: location[1],
                            xAxisPoint: api.coord([api.value(0), 0]),
                          },
                          style: {
                            fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                              {
                                offset: 0,
                                color: '#00BFF4',
                              },
                              {
                                offset: 0.35,
                                color: '#0064B5'
                              },
                              {
                                offset: 1,
                                color: 'transparent'
                              }
                            ]),
                          },
                        },
                        {
                          type: 'CubeRight',
                          shape: {
                            api,
                            xValue: api.value(0),
                            yValue: api.value(1),
                            x: location[0],
                            y: location[1],
                            xAxisPoint: api.coord([api.value(0), 0]),
                          },
                          style: {
                            fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                              {
                                offset: 0,
                                color: '#0064B5',
                              },
                              {
                                offset: 0.35,
                                color: '#00BFF4'
                              },
                              {
                                offset: 1,
                                color: 'transparent'
                              }
                            ]),
                          },
                        },
                        {
                          type: 'CubeTop',
                          shape: {
                            api,
                            xValue: api.value(0),
                            yValue: api.value(1),
                            x: location[0],
                            y: location[1],
                            xAxisPoint: api.coord([api.value(0), 0]),
                          },
                          style: {
                            fill: '#00BFF4'
                          },
                        },
                      ],
                    }
                  },
                  data:  this.Touristageanalysis2,
                },
                {
                  type: 'bar',
                  itemStyle: {
                    color: 'transparent',
                  },
                  data:  this.Touristageanalysis2,
                },
              ],
            }
            myChart.setOption(option)
          },
          // 客流统计分析
          getPassengerflowdata () {
                let myChart = echarts.init(this.$refs.Passengerflow);
                let  option = {
                    grid:{ // 让图表占满容器
                        top:"22%",
                        left:"10%",
                        right:"3%",
                        bottom:"16%"
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        backgroundColor: '#fff', // 悬浮框背景色
                        borderColor: '#000', // 悬浮框边框颜色
                        borderWidth: 1, // 悬浮框边框宽度
                        textStyle: { // 悬浮框文字样式
                            color: '#000',
                            fontSize: 12
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: this.shijian,
                        axisLabel: {
                            fontSize: 12,
                            color: '#C6D7F1'
                        }
                    },
                    yAxis: {
                        name: '',
                        nameTextStyle: {
                            color: '#C6D7F1',
                            fontWeight: 400,
                            fontSize: 12
                        },
                        type: 'value',
                        axisLabel: {
                            fontSize: 12,
                            color: '#C6D7F1'
                        }
                    },
                    series: [
                        {
                            data: this.renshu,
                            type: 'line',
                            smooth: true,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: false // 在折线拐点上显示数据
                                    },
                                    lineStyle: {
                                        width: 3,  // 设置虚线宽度
                                        type: 'solid'  // 虚线'dotted' 实线'solid'
                                    },
                                    color: '#00B1E6',
                                },
                            },
                            lineStyle: { // 设置线条的style等
                                normal: {
                                    color: '#00B1E6', // 折线线条颜色:红色
                                },
                            },
                            areaStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [  // 渐变颜色
                                        {
                                            offset: 0,
                                            color: 'rgba(85,111,253,0.50)',
                                        },
                                        {
                                            offset: 1,
                                            color: 'rgba(85,111,253,0.00)',
                                        },
                                    ],
                                    global: false,
                                },
                            },

                        }
                    ]
                };
                myChart.setOption(option);
          },
          // 获取客流统计分析
          changeTabByKltjfx(idx,type){
              this.kidx = idx;
              this.Overviewparkselect = type;
              this.shijian=[];
              this.renshu=[];
              if(this.Overviewparkselect==1){
                  this.shijian=this.renshuyear1;
                  this.renshu=this.renshuyear2;
                  this.getPassengerflowdata();  //年度累计客流
              }else  if(this.Overviewparkselect==2){
                  this.shijian=this.renshujidu1;
                  this.renshu=this.renshujidu2;
                  this.getPassengerflowdata();  //年度累计客流
              }else  if(this.Overviewparkselect==3){
                  this.shijian=this.renshuyue1;
                  this.renshu=this.renshuyue2;
                  this.getPassengerflowdata();  //年度累计客流
              }
          },
          // 客流统计同比
          Statisticalanalysisdata(){
              let myChart = echarts.init(this.$refs.Statisticalanalysis)
              let option = {
              tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                  type: 'cross',
                  crossStyle: {
                      color: '#fff'
                  }
                  }
              },
              grid: {
                  left: '1%',
                  right: '1%',
                  top: '30%',
                  bottom: '1%',
                  containLabel: true,
              },

              legend: {
                  data: [this.jinnian2, this.jinnian1, '同比'],
                  textStyle: {
                  fontSize: 12,
                  color: '#fff',
                  },
                  right: '0',
              },
              xAxis: [
                  {
                  type: 'category',
                  data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                  axisPointer: {
                      type: 'shadow'
                  },
                  axisLine: {
                      show: true,
                      lineStyle: {
                      width: 1,
                      color: '#035192'
                      }
                  },
                  axisTick: {
                      show: false
                  },
                  axisLabel: {
                      fontSize: 12,
                      color: '#C6D7F1'
                  }
                  }
              ],
              yAxis: [
                  {
                  type: 'value',
                  name: '单位:人',
                  min: 0,
                  max: 250,
                  interval: 50,
                  nameTextStyle: {
                      color: '#C6D7F1',
                      fontWeight: 400,
                      fontSize: 12
                  },
                  axisLine: {
                      show: false,
                      lineStyle: {
                      width: 1,
                      color: '#545454'
                      }
                  },
                  splitLine: {
                      show: false
                  },
                  axisTick: {
                      show: false
                  },
                  axisLabel: {
                      fontSize: 12,
                      color: '#C6D7F1',
                  //  formatter: '{value} ml'
                  }
                  },
                  {
                  type: 'value',
                  name: '同比:%',
                  // min: 0,
                  // max: 25,
                  // interval: 5,
                  nameTextStyle: {
                      color: '#C6D7F1',
                      fontWeight: 400,
                      fontSize: 12
                  },
                  axisLine: {
                      show: false,
                      lineStyle: {
                      width: 1,
                      color: '#545454'
                      }
                  },
                  splitLine: {
                      show: false
                  },
                  axisTick: {
                      show: false
                  },
                  axisLabel: {
                      fontSize: 12,
                      color: '#C6D7F1',
                  //  formatter: '{value} ml'
                  }
                  }
              ],
              series: [
                  {
                  name:this.jinnian2,
                  type: 'bar',
                  barWidth: 8, // 设置柱子粗细
                  barGap: '70%', //不同系列的柱间距离，为百分比（如 '30%'，表示柱子宽度的 30%）。
                  //  barCategoryGap: '30%', //同一系列的柱间距离，默认为类目间距的20%，可设固定值

                  itemStyle: {
                      normal: {
                      color: new echarts.graphic.LinearGradient(
                          0, 0, 1, 0,
                          [
                          {offset: 0, color: '#34ABFF'},
                          {offset: 1, color: '#006BFE'}
                          ]
                      )
                      }
                  },
                  tooltip: {
                      valueFormatter: function (value) {
                      return value ;
                      }
                  },
                  data: this.analysislastyear
                  },
                  {
                  name: this.jinnian1,
                  type: 'bar',
                  barWidth: 8, // 设置柱子粗细
                  barGap: '70%', //不同系列的柱间距离，为百分比（如 '30%'，表示柱子宽度的 30%）。
                  itemStyle: {
                      normal: {
                      color: new echarts.graphic.LinearGradient(
                          0, 0, 1, 0,
                          [
                          {offset: 0, color: '#89FCCC'},
                          {offset: 1, color: '#00FF95'}
                          ]
                      )
                      }
                  },
                  tooltip: {
                      valueFormatter: function (value) {
                      return value;
                      }
                  },
                  data: this.analysisThisyear
                  },
                  {
                  name: '同比',
                  type: 'line',
                  yAxisIndex: 1,
                  // lineStyle: {
                  //   width: 2,
                  //   color: "#CF346B",
                  // },
                  lineStyle: { // 线条样式
                      normal: {
                      width: 2,
                      color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ // 颜色渐变
                          {
                          offset: 0,
                          color: '#F678A2'
                          },
                          {
                          offset: 1,
                          color: '#CF346B'
                          }
                      ])
                      }
                  },
                  smooth: true,
                  showSymbol: false,
                  tooltip: {
                      valueFormatter: function (value) {
                      return value + '%';
                      }
                  },
                  data: this.analysisyearonyearbasis
                  }
              ]
              };
              myChart.setOption(option);
              this.resizeEcharts(this.$refs.Statisticalanalysis);
          },
          // 节假日客流
          Holidaysfestivals(){
            let myChart = echarts.init(this.$refs.jjrChart)
            let option = {
              grid: {
                  left: '14%',
                  right: '12%',
                  bottom: 30,
                  top: 10,
              },
              xAxis: {
                  type: 'value',
                  splitLine: {
                    lineStyle: {
                        color: 'rgba(77, 128, 254, 0.2)',
                        type: 'line',
                    },
                  },
                  axisTick: {
                    show: false,
                  },
                  axisLabel: {
                    //  改变x轴字体颜色和大小
                    show: true,
                    textStyle: {
                        color: '#C6D7F1',
                        fontSize: 12,
                    },
                  }
              },
              yAxis: [
                  {
                    type: 'category',
                    inverse: true,
                    axisLabel: {
                        show: true,
                        textStyle: {
                          color: '#C6D7F1',
                          fontSize: '12',
                        },
                    },
                    splitLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                    },
                    data: this.jiejiari1,
                  },
              ],
              series: [
                  {
                    name: '人数',
                    type: 'bar',
                    zlevel: 1,
                    label: {
                        show: true,
                        position: 'right', // 位置
                        color: '#C6D7F1',
                        fontSize: 12,
                        fontFamily: 'Bebas',
                        offset: [10, 2],
                        formatter(params) {
                            const num = params.value
                            return '{a|' + num + '人}'
                        },
                        rich: {
                            a: {
                                color: '#C6D7F1',
                                padding: [0, 12, 0, 0],
                            },
                        },
                    }, // 柱子上方的数值
                    itemStyle: {
                        normal: {
                          barBorderRadius: 0,
                          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                              {
                                offset: 0,
                                color: '#2a77ea',
                              },
                              {
                                offset: 1,
                                color: '#00c0fa',
                              },
                          ]),
                        },
                    },
                    barWidth: 10,
                    data: this.jiejiari2,
                  },
              ],
            };
            myChart.setOption(option);
            this.resizeEcharts(this.$refs.jjrChart);
          },
          // 省外客流（当月）
          getSwklDataByCurrentMonth(){
            this.copyDataSwkl = [];
            this.swklRankList = [];
            let sum = this.swklMonthData.reduce((cur,pre)=>cur+pre.personNum,0);
            this.swklMonthData.forEach(d=>{
                this.swklRankList.push({
                    name:d.provinceName,
                    num:d.personNum,
                    bl:(d.personNum/sum*100).toFixed(2)||0
                })
            })
            this.$nextTick(() => {
                const scrollListDom = document.querySelector('.scroll-list-seamless')
                if (scrollListDom) {
                    const scrollListDomLast = scrollListDom.querySelectorAll('li')[scrollListDom.querySelectorAll('li').length - 1];
                    let liLength = scrollListDom.querySelectorAll('li').length;
                    let liHeight = scrollListDomLast.clientHeight;
                    let liSumHeight = liHeight*liLength;
                    let parentHeight = document.querySelector('.mjzyx_pm').clientHeight;
                    let autoPlay = liSumHeight>parentHeight;
                    if (autoPlay) {
                        this.copyDataSwkl = this.swklRankList;
                        this.$refs.vueSeamlessRef._startMove();
                    }
                }
            })
          },
          // 省内客流（当月）
          getSnklDataByCurrentMonth(){
            this.copyDataSnkl = [];
            this.snklRankList = [];
            let sum = this.snklMonthData.reduce((cur,pre)=>cur+pre.personNum,0);
            this.snklMonthData.forEach(d=>{
                this.snklRankList.push({
                    name:d.cityName,
                    num:d.personNum,
                    bl:(d.personNum/sum*100).toFixed(2)||0
                })
            })
            this.$nextTick(() => {
                const scrollListDom = document.querySelector('.scroll-list-seamless-sn')
                if (scrollListDom) {
                    const scrollListDomLast = scrollListDom.querySelectorAll('li')[scrollListDom.querySelectorAll('li').length - 1];
                    let liLength = scrollListDom.querySelectorAll('li').length;
                    let liHeight = scrollListDomLast.clientHeight;
                    let liSumHeight = liHeight*liLength;
                    let parentHeight = document.querySelector('.mjzyx_pm_sn').clientHeight;
                    let autoPlay = liSumHeight>parentHeight;
                    if (autoPlay) {
                        this.copyDataSnkl = this.snklRankList;
                        this.$refs.vueSeamlessRef._startMove();
                    }
                }
            })
          },

          goBack(){
              this.$router.replace({ path: '/home' })
          },
          toTurn(type){
              if(this.$route.path==this.routerCfg[type]) return
              this.$router.push({ path: this.routerCfg[type] });
          },
          // 获取在岛、进岛、出岛人数
          getIslandUsers(){

          },
          //解决图表鼠标悬浮错位问题
          resizeEcharts(ele) {
              let rate = 1920 / window.innerWidth;
              if ( ele.style ) {
                  ele.style.zoom = 1 * rate;
                  ele.style.transform = `scale(${1 / rate})`;
                  ele.style.transformOrigin = 'top left';
              }
          },
          //切换岛屿
          changeTown(id,index){
              this.townIndex = index;
              if(!id) return
              this.myislandId = id;
              this.init();
              clearInterval(refreshTimer);
              refreshTimer = setInterval(() => {
                  this.init();
              }, 15000);
          }
      }
  }
</script>
<style scoped lang="scss">
  .screen-box{
      position: fixed;
      top: 0px;
      bottom: 0px;
      left: 0px;
      right: 0px;
      z-index: 9999;
      background-image: url(../../../assets/largescreen/new/bg_zong.png) !important;
      background-size: 100% 100%;

      .screen-wrapper{
          position: relative;
          .dp_map{
              width: 980px;
              height: 980px;
              background-image: url(../../../assets/largescreen/new/m_map_bg.png);
              background-size: 100% 100%;
              position: absolute;
              top: 0;
              left: 50%;
              margin-left: -490px;
          }

          .map_town{
              width: 68px;
              height: 41px;
              background: url('../../../assets//largescreen/town_bg.png');
              position: absolute;
              font-size: 14px;
              font-family: PingFang-SC, PingFang-SC;
              font-weight: 400;
              color: #FFFFFF;
              text-align: center;
              padding-top: 6px;
              cursor: pointer;
              &.town_active{
                  width: 84px;
                  height: 78px;
                  font-size: 16px;
                  background: url('../../../assets//largescreen/town_active_bg.png');
                  padding-top: 7px;
                  margin-left: -8px;
                  margin-top: -37px;
              }
          }
      }

      .dp_top{
          width: 100%;
          height: 118px;
          background-image: url(../../../assets/largescreen/new/top_title.png);
          background-position: center center;
          background-size: 100% 100%;
          position: relative;

          .dt_back_weather{
              position: absolute;
              top: 18px;
              left: 39px;
              display: flex;
              align-items: center;
              .dbw_fh{
                  width: 102px;
                  height: 38px;
                  cursor: pointer;
              }
              .dbw_tianqi{
                  display: flex;
                  align-items: center;
                  margin-left: 19px;
                  img{
                      width: 24px;
                      height: 22px;
                  }
                  .tianqi{
                      margin-left: 6px;
                      font-family: PingFangSC, PingFang SC;
                      font-weight: 400;
                      font-size: 16px;
                      color: #C6D7F1;
                      line-height: 22px;
                  }
              }
          }

          .dt_type{
              width: 180px;
              height: 48px;
              display: flex;
              align-items: center;
              justify-content: center;
              background-position: center center;
              background-size: 100% 100%;
              position: absolute;
              top: 52px;
              cursor: pointer;
              z-index: 3;
              &>div{
                  font-family: YouSheBiaoTiHei;
                  font-size: 20px;
                  color: #FFFFFF;
              }
              &.selected_left{
                  background-image: url(../../../assets/largescreen//new/top_text_bg_selected_left.png);
              }
              &.selected_right{
                  background-image: url(../../../assets/largescreen//new/top_text_bg_selected_right.png);
              }
          }
          .selected_left,.selected_right{
              &>div{
                  background-image: linear-gradient(to bottom, #FFFFFF 0%, #90DEFF 100%);
                  background-clip: text;
                  -webkit-background-clip: text;
                  -webkit-text-fill-color: transparent;
              }
          }
          .dt_type_ykhx,.dt_type_jq{
              background-image: url(../../../assets/largescreen//new/top_text_bg1.png);
          }
          .dt_type_jdms,.dt_type_jt{
              background-image: url(../../../assets/largescreen//new/top_text_bg2.png);
          }
          .dt_type_ykhx{
              left: 200px;
          }
          .dt_type_jq{
              left: 380px;
          }
          .dt_type_jdms{
              right: 380px;
          }
          .dt_type_jt{
              right: 200px;
          }

          .dt_time{
              position: absolute;
              top: 26px;
              right: 37px;
              font-family: DS, DS;
              font-size: 20px;
              color: #FFFFFF;
              line-height: 22px;
              text-align: left;
              background-image: linear-gradient(to bottom, #FAFCFF 0%, #44A7FE 100%);
              background-clip: text;
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
          }

          .dt_click{
              width: 670px;
              height: 100%;
              position: absolute;
              top: 0;
              left: 50%;
              margin-left: -335px;
              cursor: pointer;
              z-index: 2;
          }
      }

      .dp_middle{
          width: 100%;
          height: calc(100% - 165px);
          display: flex;
          .dm_left,.dm_right{
              width: 470px;
              box-sizing: border-box;
              display: flex;
              flex-direction: column;
              justify-content: space-around;
          }
          .dm_left{
              padding: 0 24px 0 26px;
          }
          .dm_center{
              width: calc(100% - 940px);
              position: relative;
              .dmc_map{
                  padding: 26px 23px 0;
                  box-sizing: border-box;
                  display: flex;
                  flex-direction: column;
                  align-items: center;

                  .dmcm_nums{
                      display: flex;
                      .dn_pte{
                          display: flex;
                          flex-direction: column;
                          align-items: center;
                          &:nth-child(2){
                              margin: 0 80px;
                          }
                          .title{
                              font-family: PingFang-SC, PingFang-SC;
                              font-weight: bold;
                              font-size: 16px;
                              color: #C6D7F1;
                              line-height: 22px;
                          }
                          .nums{
                              display: flex;
                              .n_item{
                                  width: 40px;
                                  height: 56px;
                                  line-height: 56px;
                                  text-align: center;
                                  background: url(../../../assets/largescreen/num_bg.png) no-repeat;
                                  background-size: 100% 100%;
                                  margin: 5px 2px 0 2px;
                                  font-size: 30px;
                                  font-family: D-DINExp, D-DINExp;
                                  font-weight: bold;
                                  color: #C6D7F1;
                                  &:first-child{
                                      margin-left: 0;
                                  }
                              }
                          }
                      }
                  }
              }
          }
          .dm_right{
              padding: 0 26px 0 24px;
          }
      }

      .dp_bottom{
          width: 100%;
          height: 47px;
          background-image: url(../../../assets/largescreen/new/bg_bottom.png);
          background-position: center center;
          background-size: 100% 100%;
      }

      .box{
          position: relative;
          background: linear-gradient( 180deg, rgba(7,27,67,0.1) 0%, rgba(13,46,89,0.2) 100%), radial-gradient( 82% 15% at 50% 100%, rgba(39,115,255,0.1) 0%, rgba(39,115,255,0) 100%);
          .b_title{
              width: 420px;
              height: 44px;
              background: url("../../../assets/largescreen/y6.png") no-repeat;
              padding-left: 33px;
              line-height: 36px;
              font-size: 20px;
              font-family: YouSheBiaoTiHei;
              color: #FFFFFF;
          }
          &.c_b_box{
              width: 100%;
              height: 300px;
              padding: 0 20px;
              box-sizing: border-box;
              position: absolute;
              bottom: 0;
              left: 0;
          }
      }

      .dp_box{
          width: 420px;
          height: 300px;
          background: linear-gradient( 180deg, rgba(7,27,67,0.1) 0%, rgba(13,46,89,0.2) 100%), radial-gradient( 82% 15% at 50% 100%, rgba(39,115,255,0.1) 0%, rgba(39,115,255,0) 100%);
          position: relative;
          

          .kltjfx_tabs{
                display: flex;
                background: #15213E;
                border-radius: 2px;
                border: 1px solid #34579F;
                position: absolute;
                top: 50px;
                right: 4px;
                z-index: 999;
                .pre{
                    height: 24px;
                    padding: 5px 8px;
                    box-sizing: border-box;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 12px;
                    color: #6D7D99;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                    border-right: 1px solid #34579F;
                    &:last-child{
                        border: none;
                    }
                    &.active{
                        background: linear-gradient( 180deg, #273F7C 0%, #4566BC 100%);
                        border-image: linear-gradient(180deg, rgba(51, 86, 158, 1), rgba(66, 104, 189, 1)) 1 1;
                        color: #FFFFFF;
                    }
                }
            }
      }

      .db_content{
          width: 100%;
          height: calc(100% - 44px);
          .chart{
              width: 100%;
              height: 100%;
              position: relative;
              z-index: 998;
              
              &.mjzyx_pm{
                width:100%;
                height: 100%;
                padding:0 20px;
                box-sizing: border-box;
                overflow:hidden;
                ::v-deep .ul-scoll{
                    padding-left: 0 !important;
                }
                .mpm_item{
                    margin-bottom: 6px;
                    list-style: none;
                    .mpmi_top{
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        .mpmit_l{
                            display: flex;
                            align-items: center;
                            .mpmil_top{
                                width: 48px;
                                height: 20px;
                                background-repeat: no-repeat;
                                background-size: cover;
                                line-height: 20px;
                                text-align: center;
                                font-family: YouSheBiaoTiHei;
                                font-size: 12px;
                                color: #FFFFFF;
                            }
                            p{
                                margin-left: 10px;
                                font-family: PingFangSC, PingFang SC;
                                font-weight: 400;
                                font-size: 12px;
                                color: #C6D7F1;
                            }
                        }
                        .mpmit_r{
                            font-family: PingFangSC, PingFang SC;
                            font-weight: 400;
                            font-size: 12px;
                            color: #C6D7F1;
                        }
                    }
                    .mpmi_bottom{
                        margin-top: -4px;
                        width: 100%;
                        height: 4px;
                        border-radius: 2px;
                        background: rgba(31,120,251,0.2);
                        position: relative;
                        .mpmi_bottom_bl{
                            height: 100%;
                            background: linear-gradient( 270deg, #08F4F9 0%, rgba(1,155,243,0) 100%);
                            position: absolute;
                            left: 0;
                            top: 0;
                        }
                    }
                }
              }
              &.mjzyx_pm_sn{
                width:100%;
                height: 100%;
                padding:0 20px;
                box-sizing: border-box;
                overflow:hidden;
                ::v-deep .ul-scoll{
                    padding-left: 0 !important;
                }
                .mpm_item{
                    margin-bottom: 6px;
                    list-style: none;
                    .mpmi_top{
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        .mpmit_l{
                            display: flex;
                            align-items: center;
                            .mpmil_top{
                                width: 48px;
                                height: 20px;
                                background-repeat: no-repeat;
                                background-size: cover;
                                line-height: 20px;
                                text-align: center;
                                font-family: YouSheBiaoTiHei;
                                font-size: 16px;
                                text-align: left;
                            }
                            p{
                                margin-left: 15px;
                                font-family: PingFangSC, PingFang SC;
                                font-weight: 400;
                                font-size: 12px;
                                color: #C6D7F1;
                            }
                        }
                        .mpmit_r{
                            font-family: PingFangSC, PingFang SC;
                            font-weight: 400;
                            font-size: 12px;
                            color: #C6D7F1;
                        }
                    }
                    .mpmi_bottom{
                        margin-top: -4px;
                        width: 100%;
                        height: 4px;
                        border-radius: 2px;
                        background: rgba(31,120,251,0.2);
                        position: relative;
                        .mpmi_bottom_bl{
                            height: 100%;
                            background: linear-gradient( 270deg, #08F4F9 0%, rgba(1,155,243,0) 100%);
                            position: absolute;
                            left: 0;
                            top: 0;
                        }
                        .mp_end{
                            width: 4px;
                            height: 12px;
                            background: #FFFFFF;
                            position: absolute;
                            bottom: 0;
                            transform: rotate(15deg);
                        }
                    }
                }
              }
          }

        .dc_tabs{
            width: calc(100% - 38px);
            margin:19px 19px 0;
            border-bottom: 1px solid #065691;
            display: flex;
            align-items: center;
            justify-content: center;
            &>div{
                display: flex;
                align-items: center;
                justify-content: center;
                padding-bottom: 10px;
                position: relative;
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                font-size: 16px;
                color: #065691;
                line-height: 16px;
                cursor: pointer;
                &:last-child{
                    margin-left: 84px;
                }
                &.active{
                    color: #C6D7F1;
                    &::after{
                        content: '';
                        width: 88px;
                        height: 4px;
                        background: url(../../../assets/largescreen/new/m_l_selected.png) no-repeat;
                        background-size: 100% 100%;
                        position: absolute;
                        left: 50%;
                        margin-left: -44px;
                        bottom: -1px;
                    }
                }
            }
        }

        .dc_tlsc{
            width: 100%;
            height: calc(100% - 46px);
            display: flex;
            align-items: center;
            justify-content: center;
            .dct_box{
                display: flex;
                .dct_middle{
                    width: 140px;
                    height: 140px;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .dct_lb{
                    width: 140px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    .dctl_box{
                        width: 100%;
                        height: 48px;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        
                        .db_text{
                            margin-left: 17px;
                            display: flex;
                            align-items: center;
                            font-family: DINAlternate, DINAlternate;
                            font-weight: bold;
                            font-size: 16px;
                            color: #C6D7F1;
                            line-height: 19px;
                            span{
                                font-family: PingFangSC, PingFang SC;
                                font-weight: 400;
                                font-size: 12px;
                                color: #C6D7F1;
                                line-height: 17px;
                            }
                        }
                        .db_tip{
                            display: flex;
                            align-items: center;
                            p{
                                font-family: PingFangSC, PingFang SC;
                                font-weight: 400;
                                font-size: 12px;
                                color: #C6D7F1;
                                line-height: 17px;
                            }
                            img{
                                width: 30px;
                                height: 30px;
                            }
                        }
                        &.dctlb_l{
                            .db_text{
                                margin-left: 17px;
                            }
                            background: url(../../../assets/largescreen/new/m_l_tlsc_lbg.png) no-repeat;
                            background-size: 100% 100%;
                        }
                        &.dctlb_r{
                            background: url(../../../assets/largescreen/new/m_l_tlsc_rbg.png) no-repeat;
                            background-size: 100% 100%;
                            .db_text{
                                margin-right: 17px;
                            }
                        }
                    }
                }
            }
        }
      }
  }
</style>